import React, { useState } from 'react';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import Cookies from 'js-cookie';

const Login = () => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    const onFinish = async (values) => {
        try {
            setLoading(true);
            // 这里可以添加调用后端 API 的逻辑
            // 例如：const response = await loginApi(values);
            // 模拟异步登录
            setTimeout(() => {
                message.success('登录成功！');
                Cookies.set('token', 'takzhang');
                window.location.replace('/');
            }, 1500);
        } catch (error) {
            message.error('登录失败，请重试！');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            background: 'linear-gradient(to bottom right, #009688, #00bcd4',
        }}>
            <Form
                form={form}
                name="normal_login"
                className="login-form"
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input
                        prefix={<UserOutlined className="site-form-item-icon" />}
                        placeholder="用户名"
                        size='large'
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                        size='large'
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox style={{marginLeft: '72px',marginBottom: '12px',color: '#fff'}}>记住我</Checkbox>
                    </Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        className="login-form-button"
                        loading={loading}
                        size='large'
                        style={{
                            width: '100%'
                        }}
                    >
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default Login;